<!DOCTYPE html>

<html>
<head>
  <title>mapView.coffee</title>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <link rel="stylesheet" media="all" href="public/stylesheets/normalize.css" />
  <link rel="stylesheet" media="all" href="docco.css" />
</head>
<body>
  <div class="container">
    <div class="page">

      <div class="header">
        
          <h1>mapView.coffee</h1>
        

        
          <div class="toc">
            <h3>Table of Contents</h3>
            <ol>
              
                
                <li>
                  <a class="source" href="admin.html">
                    admin.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="api.auditData.html">
                    api.auditData.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="api.auditEvent.html">
                    api.auditEvent.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="api.html">
                    api.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="api.entity.html">
                    api.entity.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="api.map.html">
                    api.map.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="api.server.html">
                    api.server.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="api.variable.html">
                    api.variable.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="api.view.html">
                    api.view.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="app.instance.html">
                    app.instance.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="appjs.html">
                    appjs.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="data.html">
                    data.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="dataUtil.html">
                    dataUtil.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="manager.html">
                    manager.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="messages.html">
                    messages.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="auditData.html">
                    auditData.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="auditEvent.html">
                    auditEvent.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="base.html">
                    base.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="entityDefinition.html">
                    entityDefinition.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="entityObject.html">
                    entityObject.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="eventAction.html">
                    eventAction.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="eventRule.html">
                    eventRule.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="link.html">
                    link.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="map.html">
                    map.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="shape.html">
                    shape.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="user.html">
                    user.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="userSettings.html">
                    userSettings.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="variable.html">
                    variable.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="adminRoutes.html">
                    adminRoutes.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="appRoutes.html">
                    appRoutes.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="settings.html">
                    settings.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="sockets.html">
                    sockets.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="tutorial.html">
                    tutorial.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="vectors.html">
                    vectors.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="statusTabView.html">
                    statusTabView.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="toolsTabView.html">
                    toolsTabView.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="usersTabView.html">
                    usersTabView.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="adminView.html">
                    adminView.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="alertView.html">
                    alertView.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="auditDataManagerView.html">
                    auditDataManagerView.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="auditEventManagerView.html">
                    auditEventManagerView.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="baseView.html">
                    baseView.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="createMapView.html">
                    createMapView.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="entityManagerView.html">
                    entityManagerView.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="footerView.html">
                    footerView.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="helpView.html">
                    helpView.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="entitiesTabView.html">
                    entitiesTabView.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="inspectorTabView.html">
                    inspectorTabView.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="mapTabView.html">
                    mapTabView.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="shapeTabView.html">
                    shapeTabView.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="controlsView.html">
                    controlsView.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="labelEditView.html">
                    labelEditView.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="linkCreatorView.html">
                    linkCreatorView.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="linkLabelsView.html">
                    linkLabelsView.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="linkView.html">
                    linkView.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="shapeLabelsView.html">
                    shapeLabelsView.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="shapeView.html">
                    shapeView.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="shapesMoverView.html">
                    shapesMoverView.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="mapView.html">
                    mapView.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="menuView.html">
                    menuView.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="overlayView.html">
                    overlayView.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="scriptEditorView.html">
                    scriptEditorView.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="settingsView.html">
                    settingsView.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="startView.html">
                    startView.coffee
                  </a>
                </li>
              
                
                <li>
                  <a class="source" href="variableManagerView.html">
                    variableManagerView.coffee
                  </a>
                </li>
              
            </ol>
          </div>
        
      </div>

      
        
        <h2 id="map-view">MAP VIEW</h2>

        
      
        
        <p>Represents the map view. This is the most important view of the app!</p>

        
          <div class='highlight'><pre><span class="class"><span class="keyword">class</span> <span class="title">SystemApp</span>.<span class="title">MapView</span> <span class="keyword">extends</span> <span class="title">SystemApp</span>.<span class="title">BaseView</span></span>

    <span class="attribute">paper</span>: <span class="literal">null</span>                 <span class="comment"># the Raphael paper object</span>
    <span class="attribute">paperBg</span>: <span class="literal">null</span>               <span class="comment"># the paper background object or color string</span>
    <span class="attribute">selectedShapes</span>: <span class="literal">null</span>        <span class="comment"># collection of selected [Shape Views](shapeView.html) on the map</span>
    <span class="attribute">hoverShape</span>: <span class="literal">null</span>            <span class="comment"># the current shape pointed by the mouse</span>
    <span class="attribute">lastPressedKey</span>: <span class="literal">null</span>        <span class="comment"># the last keyboard key pressed by the user</span>

    <span class="attribute">zIndexMax</span>: <span class="number">100</span>              <span class="comment"># the maximum z-index of an element inside the map</span>
    <span class="attribute">currentZoom</span>: <span class="number">1</span>              <span class="comment"># current map zoom</span>
    <span class="attribute">currentPanX</span>: <span class="number">0</span>              <span class="comment"># current pan X position</span>
    <span class="attribute">currentPanY</span>: <span class="number">0</span>              <span class="comment"># current pan Y position</span>
    <span class="attribute">mousePosX</span>: <span class="number">0</span>                <span class="comment"># current or last mouse X position</span>
    <span class="attribute">mousePosY</span>: <span class="number">0</span>                <span class="comment"># current or last mouse Y position</span>
    <span class="attribute">mapDivWidth</span>: <span class="number">0</span>              <span class="comment"># cached value of the map DIV width</span>
    <span class="attribute">mapDivHeight</span>: <span class="number">0</span>             <span class="comment"># cached value of the map DIV height</span>
    <span class="attribute">overrideShapeTitle</span>: <span class="literal">null</span>    <span class="comment"># override the value / property name displayed of the shape's title</span>

    <span class="attribute">editEnabled</span>: <span class="literal">false</span>          <span class="comment"># is the map in edit mode?</span>
    <span class="attribute">isPanning</span>: <span class="literal">false</span>            <span class="comment"># true if user is moving the map, otherwise false</span>
    <span class="attribute">isCreatingLink</span>: <span class="literal">false</span>       <span class="comment"># when creating new links (dragging the link connector), this will be set to true</span>
    <span class="attribute">isLinksVisible</span>: <span class="literal">true</span>        <span class="comment"># are links visible or hidden on the map?</span>

    <span class="attribute">controlsView</span>: <span class="literal">null</span>          <span class="comment"># a [Controls View](controlsView.html) to control and interact with map</span>
    <span class="attribute">shapesMoverView</span>: <span class="literal">null</span>       <span class="comment"># a [Shapes Mover View](shapesMoverView.html) to move multiple shapes at once</span>
    <span class="attribute">stackGroups</span>: <span class="literal">null</span>           <span class="comment"># holds 9 SVG "groups" elements, used to control shape's z-index</span>
    <span class="attribute">shapeViews</span>: <span class="literal">null</span>            <span class="comment"># holds current map's ([Shape Views](shapeView.html))</span>
    <span class="attribute">linkViews</span>: <span class="literal">null</span>             <span class="comment"># holds current map's ([Link Views](linkView.html))</span>
    <span class="attribute">gridLines</span>: <span class="literal">null</span>             <span class="comment"># array, holds all grid lines (when toggled on)</span>

    <span class="attribute">timerAfterZoom</span>: <span class="literal">null</span>        <span class="comment"># timer to trigger the `afterZoomSet` method</span></pre></div>
        
      
        
        <h2 id="dom-elements">DOM ELEMENTS</h2>

        
      
        
        
        
          <div class='highlight'><pre>    <span class="attribute">$footer</span>: <span class="literal">null</span>          <span class="comment"># the map footer wrapper</span>
    <span class="attribute">$footerName</span>: <span class="literal">null</span>      <span class="comment"># the map name span (2)</span>
    <span class="attribute">$footerShape</span>: <span class="literal">null</span>     <span class="comment"># the map current shape span (3)</span>
    <span class="attribute">$panningIcon</span>: <span class="literal">null</span>     <span class="comment"># icon shown when map is panning / moving</span></pre></div>
        
      
        
        <h2 id="init-and-dispose">INIT AND DISPOSE</h2>

        
      
        
        <p>Init the map view.</p>

        
          <div class='highlight'><pre>    <span class="attribute">initialize</span>:<span class="function"> =&gt;</span>
        <span class="property">@setDom</span>()
        <span class="property">@setPaper</span>()
        <span class="property">@setEvents</span>()</pre></div>
        
      
        
        <p>Child views.</p>

        
          <div class='highlight'><pre>        <span class="property">@controlsView</span> = <span class="keyword">new</span> SystemApp.MapControlsView <span class="keyword">this</span>
        <span class="property">@shapesMoverView</span> = <span class="keyword">new</span> SystemApp.MapShapesMoverView <span class="keyword">this</span></pre></div>
        
      
        
        <p>Cached variable: are links visible?</p>

        
          <div class='highlight'><pre>        <span class="property">@isLinksVisible</span> = <span class="property">@controlsView</span>.isLinksVisible()</pre></div>
        
      
        
        <p>Clear the current map view, footer, and unbind all events.</p>

        
          <div class='highlight'><pre>    <span class="attribute">dispose</span>:<span class="function"> =&gt;</span>
        $(<span class="built_in">document</span>).unbind <span class="string">"mouseup"</span>, <span class="property">@mouseUp</span>
        $(<span class="built_in">document</span>).unbind <span class="string">"keydown"</span>, <span class="property">@keyDown</span>

        <span class="property">@clear</span>()

        <span class="property">@controlsView</span>?.dispose()
        <span class="property">@shapesMoverView</span>?.dispose()

        <span class="property">@controlsView</span> = <span class="literal">null</span>
        <span class="property">@shapesMoverView</span> = <span class="literal">null</span>
        <span class="property">@shapeViews</span> = <span class="literal">null</span>
        <span class="property">@linkViews</span> = <span class="literal">null</span>

        <span class="property">@baseDispose</span>()</pre></div>
        
      
        
        <p>Set the DOM elements cache.</p>

        
          <div class='highlight'><pre>    <span class="attribute">setDom</span>:<span class="function"> =&gt;</span>
        <span class="property">@setElement</span> $ <span class="string">"#map"</span>
        <span class="property">@$footer</span> = $ <span class="string">"#footer-maps"</span>
        <span class="property">@$footerName</span> = $ <span class="string">"#footer-maps-name"</span>
        <span class="property">@$footerShape</span> = $ <span class="string">"#footer-maps-shape"</span>
        <span class="property">@$panningIcon</span> = $ <span class="string">"#map-panning-icon"</span></pre></div>
        
      
        
        <p>Bind events to the global app events, DOM elements and objects.</p>

        
          <div class='highlight'><pre>    <span class="attribute">setEvents</span>:<span class="function"> =&gt;</span>
        <span class="property">@listenTo</span> SystemApp.mapEvents, <span class="string">"url:reset"</span>, <span class="property">@resetUrl</span>
        <span class="property">@listenTo</span> SystemApp.mapEvents, <span class="string">"background:toggle"</span>, <span class="property">@toggleBackground</span>
        <span class="property">@listenTo</span> SystemApp.mapEvents, <span class="string">"edit:toggle"</span>, <span class="property">@toggleEdit</span>
        <span class="property">@listenTo</span> SystemApp.mapEvents, <span class="string">"links:toggle"</span>, <span class="property">@toggleLinks</span>
        <span class="property">@listenTo</span> SystemApp.mapEvents, <span class="string">"shapes:overridetitle"</span>, <span class="property">@setOverrideShapeTitle</span>
        <span class="property">@listenTo</span> SystemApp.mapEvents, <span class="string">"zoom:in"</span>, <span class="property">@zoomIn</span>
        <span class="property">@listenTo</span> SystemApp.mapEvents, <span class="string">"zoom:out"</span>, <span class="property">@zoomOut</span>
        <span class="property">@listenTo</span> SystemApp.mapEvents, <span class="string">"selected:blink"</span>, <span class="property">@blinkSelectedShapes</span>
        <span class="property">@listenTo</span> SystemApp.dataEvents, <span class="string">"auditdata:refresh"</span>, <span class="property">@auditDataRefresh</span></pre></div>
        
      
        
        <p>Handle document events.</p>

        
          <div class='highlight'><pre>        $(<span class="built_in">document</span>).bind <span class="string">"mouseup"</span>, <span class="property">@mouseUp</span>
        $(<span class="built_in">document</span>).bind <span class="string">"keydown"</span>, <span class="property">@keyDown</span></pre></div>
        
      
        
        <p>Handle map element events.</p>

        
          <div class='highlight'><pre>        <span class="property">@$el</span>.bind <span class="string">"mousedown"</span>, <span class="property">@mouseDown</span>
        <span class="property">@$el</span>.bind <span class="string">"mousemove"</span>, <span class="property">@mouseMove</span>
        <span class="property">@$el</span>.bind <span class="string">"mousewheel"</span>, <span class="property">@mouseWheel</span>
        <span class="property">@$el</span>.bind <span class="string">"contextmenu"</span>, <span class="property">@contextMenu</span>
        <span class="property">@$el</span>.dblclick <span class="property">@doubleClick</span></pre></div>
        
      
        
        <p>Set the Raphael/SVG paper and its properties.</p>

        
          <div class='highlight'><pre>    <span class="attribute">setPaper</span>:<span class="function"> =&gt;</span>
        width = SystemApp.Settings.map.paperSizeX
        height = SystemApp.Settings.map.paperSizeY

        <span class="property">@selectedShapes</span> = {}
        <span class="property">@paper</span> = <span class="keyword">new</span> Raphael <span class="string">"map"</span>, width, height</pre></div>
        
      
        
        <p>Count how many shapes are selected.</p>

        
          <div class='highlight'><pre>    <span class="attribute">countSelectedShapes</span>:<span class="function"> =&gt;</span>
        <span class="keyword">return</span> Object.keys(<span class="property">@selectedShapes</span>).length</pre></div>
        
      
        
        <h2 id="render-the-current-map">RENDER THE CURRENT MAP</h2>

        
      
        
        <p>Clear the map (usually called when user changes the current <a href="map.html">Map</a>).</p>

        
          <div class='highlight'><pre>    <span class="attribute">clear</span>:<span class="function"> =&gt;</span>
        <span class="property">@$el</span>.find(<span class="string">".label-edit-view"</span>).remove()</pre></div>
        
      
        
        <p>Unbind and clear the <a href="map.html">current map</a>.</p>

        
          <div class='highlight'><pre>        <span class="keyword">if</span> <span class="property">@model</span>?
            <span class="property">@stopListening</span> <span class="property">@model</span>.shapes()
            <span class="property">@stopListening</span> <span class="property">@model</span>.links()
            <span class="property">@stopListening</span> <span class="property">@model</span>
            <span class="property">@model</span> = <span class="literal">null</span></pre></div>
        
      
        
        <p>Clear the current map background object.</p>

        
          <div class='highlight'><pre>        <span class="property">@paperBg</span>?.remove()
        <span class="property">@gridLines</span>?.remove()
        <span class="property">@paperBg</span> = <span class="literal">null</span></pre></div>
        
      
        
        <p>Remove the <a href="shapesMoverView.html">Shapes Mover View</a>.</p>

        
          <div class='highlight'><pre>        <span class="property">@shapesMoverView</span>.remove()</pre></div>
        
      
        
        <p>Clear shapes and links.</p>

        
          <div class='highlight'><pre>        <span class="property">@clearSelectedShapes</span>()
        <span class="property">@clearShapes</span>()
        <span class="property">@clearLinks</span>()

        _.each <span class="property">@stackGroups</span>, <span class="function"><span class="params">(group)</span> -&gt;</span> group.remove()
        <span class="property">@stackGroups</span> = {}</pre></div>
        
      
        
        <p>Clear the paper.</p>

        
          <div class='highlight'><pre>        <span class="property">@paper</span>?.clear()</pre></div>
        
      
        
        <p>CLear (remove!) all shapes on the map.</p>

        
          <div class='highlight'><pre>    <span class="attribute">clearShapes</span>:<span class="function"> =&gt;</span>
        _.each <span class="property">@shapeViews</span>, <span class="function"><span class="params">(view)</span> -&gt;</span> view.dispose()
        <span class="property">@shapeViews</span> = {}</pre></div>
        
      
        
        <p>CLear (remove!) all links on the map.</p>

        
          <div class='highlight'><pre>    <span class="attribute">clearLinks</span>:<span class="function"> =&gt;</span>
        _.each <span class="property">@linkViews</span>, <span class="function"><span class="params">(view)</span> -&gt;</span> view.dispose()
        <span class="property">@linkViews</span> = {}</pre></div>
        
      
        
        <p>Unselect all selected shapes (if any).</p>

        
          <div class='highlight'><pre>    <span class="attribute">clearSelectedShapes</span>:<span class="function"> =&gt;</span>
        count = <span class="number">0</span>
        <span class="keyword">for</span> modelId, view <span class="keyword">of</span> <span class="property">@selectedShapes</span>
            view.unhighlight()
            count++</pre></div>
        
      
        
        <p>Reset the selected shapes object.</p>

        
          <div class='highlight'><pre>        <span class="property">@selectedShapes</span> = {}
        <span class="property">@controlsView</span>.bind()
        <span class="property">@setFooterShape</span>()

        SystemApp.consoleLog <span class="string">"MapView.clearSelectedShapes"</span>, <span class="string">"Cleared <span class="subst">#{count}</span> shapes."</span></pre></div>
        
      
        
        <p>Bind a <a href="map.html">Map</a> to the map. this will reset the map state!</p>

        
          <div class='highlight'><pre>    <span class="attribute">bind</span>: <span class="function"><span class="params">(map)</span> =&gt;</span>
        console.profile <span class="string">"MapView.bind"</span> <span class="keyword">if</span> SystemApp.Settings.general.profile
        SystemApp.consoleLog <span class="string">"MapView.bind"</span>, <span class="string">"<span class="subst">#{map.name()}</span>, <span class="subst">#{map.shapes().length}</span> shapes, <span class="subst">#{map.links().length}</span> links"</span>

        <span class="property">@model</span>?.save()
        <span class="property">@clear</span>()</pre></div>
        
      
        
        <p>No map to bind? So stop here.</p>

        
          <div class='highlight'><pre>        <span class="keyword">if</span> <span class="keyword">not</span> map?
            SystemApp.toggleLoading <span class="literal">false</span>
            <span class="keyword">return</span>

        <span class="property">@model</span> = map</pre></div>
        
      
        
        <p>Set the current window title and footer details.</p>

        
          <div class='highlight'><pre>        <span class="property">@setTitle</span> map.name()
        <span class="property">@setFooterName</span> map.name()</pre></div>
        
      
        
        <p>Reset the SVG paper with the new map paper size.</p>

        
          <div class='highlight'><pre>        <span class="property">@paper</span>.setSize map.paperSizeX(), map.paperSizeY()</pre></div>
        
      
        
        <p>Bind map data.</p>

        
          <div class='highlight'><pre>        <span class="property">@bindBg</span>()
        <span class="property">@bindGroups</span>()
        <span class="property">@bindShapes</span>()
        <span class="property">@setViewBox</span>()</pre></div>
        
      
        
        <p>Reset the <a href="shapesMovewView.html">shapes mover view</a>.</p>

        
          <div class='highlight'><pre>        <span class="property">@shapesMoverView</span>.render()</pre></div>
        
      
        
        <p>Force refresh shape/link labels.</p>

        
          <div class='highlight'><pre>        <span class="property">@refreshLabels</span>()</pre></div>
        
      
        
        <p>Generate the map thumbnail on the server.</p>

        
          <div class='highlight'><pre>        <span class="property">@generateThumbnail</span>()</pre></div>
        
      
        
        <p>Check and run the init script.</p>

        
          <div class='highlight'><pre>        initScript = map.initScript()
        SystemApp.DataUtil.runEval initScript <span class="keyword">if</span> initScript? <span class="keyword">and</span> initScript <span class="keyword">isnt</span> <span class="string">""</span></pre></div>
        
      
        
        <p>The other views that a new map has loaded.</p>

        
          <div class='highlight'><pre>        SystemApp.mapEvents.trigger <span class="string">"loaded"</span>, map
        SystemApp.toggleLoading <span class="literal">false</span></pre></div>
        
      
        
        <p>Finally bind map events.</p>

        
          <div class='highlight'><pre>        <span class="property">@bindEvents</span>()

        console.profileEnd <span class="string">"MapView.bind"</span> <span class="keyword">if</span> SystemApp.Settings.general.profile</pre></div>
        
      
        
        <p>Bind event listeners to the current <a href="map.html">Map</a>.</p>

        
          <div class='highlight'><pre>    <span class="attribute">bindEvents</span>:<span class="function"> =&gt;</span>
        <span class="property">@listenTo</span> <span class="property">@model</span>, <span class="string">"sync"</span>, <span class="property">@mapSaved</span>
        <span class="property">@listenTo</span> <span class="property">@model</span>, <span class="string">"destroy"</span>, <span class="property">@mapRemoved</span>

        <span class="property">@listenTo</span> <span class="property">@model</span>, <span class="string">"change:name"</span>, <span class="property">@nameChanged</span>
        <span class="property">@listenTo</span> <span class="property">@model</span>, <span class="string">"change:paperSizeX"</span>, <span class="property">@paperSizeChanged</span>
        <span class="property">@listenTo</span> <span class="property">@model</span>, <span class="string">"change:paperSizeY"</span>, <span class="property">@paperSizeChanged</span>
        <span class="property">@listenTo</span> <span class="property">@model</span>, <span class="string">"change:gridSizeX"</span>, <span class="property">@gridSizeChanged</span>
        <span class="property">@listenTo</span> <span class="property">@model</span>, <span class="string">"change:gridSizeY"</span>, <span class="property">@gridSizeChanged</span>

        <span class="property">@listenTo</span> <span class="property">@model</span>.shapes(), <span class="string">"reset"</span>, <span class="property">@resetShapes</span>
        <span class="property">@listenTo</span> <span class="property">@model</span>.shapes(), <span class="string">"add"</span>, <span class="property">@addShape</span>
        <span class="property">@listenTo</span> <span class="property">@model</span>.shapes(), <span class="string">"remove"</span>, <span class="property">@removeShape</span>

        <span class="property">@listenTo</span> <span class="property">@model</span>.links(), <span class="string">"reset"</span>, <span class="property">@resetLinks</span>
        <span class="property">@listenTo</span> <span class="property">@model</span>.links(), <span class="string">"add"</span>, <span class="property">@addLink</span>
        <span class="property">@listenTo</span> <span class="property">@model</span>.links(), <span class="string">"remove"</span>, <span class="property">@removeLink</span></pre></div>
        
      
        
        <p>Set the paper background, which can be a URL to an image or a solid color.</p>

        
          <div class='highlight'><pre>    <span class="attribute">bindBg</span>:<span class="function"> =&gt;</span>
        <span class="property">@paperBg</span> = <span class="property">@model</span>.background()

        <span class="keyword">if</span> <span class="property">@paperBg</span> <span class="keyword">isnt</span> <span class="literal">undefined</span> <span class="keyword">and</span> <span class="property">@paperBg</span>.indexOf(<span class="string">"."</span>) &gt; <span class="number">0</span>
            <span class="property">@paperBg</span> = <span class="property">@paper</span>.image <span class="string">"images/<span class="subst">#{<span class="property">@paperBg</span>}</span>"</span>, <span class="number">0</span>, <span class="number">0</span>, <span class="property">@paper</span>.width, <span class="property">@paper</span>.height
        <span class="keyword">else</span>
            <span class="property">@paperBg</span> = <span class="property">@paper</span>.rect(<span class="number">0</span>, <span class="number">0</span>, <span class="property">@paper</span>.width, <span class="property">@paper</span>.height).attr {<span class="attribute">fill</span>: <span class="property">@paperBg</span>}

        <span class="property">@paperBg</span>.node.id = SystemApp.Settings.map.id</pre></div>
        
      
        
        <p>Create the map groups using raphael.group.js plugin.</p>

        
          <div class='highlight'><pre>    <span class="attribute">bindGroups</span>:<span class="function"> =&gt;</span>
        i = <span class="number">1</span>
        <span class="keyword">while</span> i &lt; <span class="number">10</span>
            <span class="property">@stackGroups</span>[i] = <span class="property">@paper</span>.group()
            i++</pre></div>
        
      
        
        <p>Reset shapes on the map. This is mainly called when the map&#39;s <code>shapes</code> collection
triggers an reset event.</p>

        
          <div class='highlight'><pre>    <span class="attribute">resetShapes</span>:<span class="function"> =&gt;</span>
        <span class="keyword">return</span> <span class="keyword">if</span> <span class="keyword">not</span> <span class="property">@model</span>?

        <span class="property">@clearShapes</span>()
        <span class="property">@bindShapes</span>()</pre></div>
        
      
        
        <p>Reset links on the map. This is mainly called when the map&#39;s <code>links</code> collection
triggers an reset event.</p>

        
          <div class='highlight'><pre>    <span class="attribute">resetLinks</span>:<span class="function"> =&gt;</span>
        <span class="keyword">return</span> <span class="keyword">if</span> <span class="keyword">not</span> <span class="property">@model</span>?

        <span class="property">@clearLinks</span>()
        <span class="property">@bindLinks</span>()</pre></div>
        
      
        
        <p>Refresh current map&#39;s <a href="shapeLabelsView.html">Shape Labels</a> and
<a href="linkLabelsView.html">Link Labels</a>. This will also update the <a href="shapeDetailsView.html">Shape Details View</a>
to reflect the selected shape&#39;s active alerts. Refresh will be aborted if user is panning the map.</p>

        
          <div class='highlight'><pre>    <span class="attribute">refreshLabels</span>:<span class="function"> =&gt;</span>
        <span class="keyword">return</span> <span class="keyword">if</span> <span class="property">@isPanning</span>

        _.each <span class="property">@shapeViews</span>, <span class="function"><span class="params">(view)</span> -&gt;</span> view.labelsView.bindAllLabelsData()
        _.each <span class="property">@linkViews</span>, <span class="function"><span class="params">(view)</span> -&gt;</span> view.labelsView.bindAllLabelsData()

        <span class="property">@controlsView</span>.inspectorTabView.bindActiveAuditEvents()</pre></div>
        
      
        
        <h2 id="map-events">MAP EVENTS</h2>

        
      
        
        <p>Save the current <code>filter</code> to the remote server.</p>

        
          <div class='highlight'><pre>    <span class="attribute">saveMap</span>:<span class="function"> =&gt;</span>
        <span class="property">@model</span>.save() <span class="keyword">if</span> <span class="property">@editEnabled</span> <span class="keyword">and</span> <span class="property">@model</span>.hasChanged()</pre></div>
        
      
        
        <p>Display an alert whenever the current map has been saved to the server.</p>

        
          <div class='highlight'><pre>    <span class="attribute">mapSaved</span>: <span class="function"><span class="params">(map)</span> =&gt;</span>
        SystemApp.alertEvents.trigger <span class="string">"footer"</span>, {<span class="attribute">savedModel</span>: map}</pre></div>
        
      
        
        <p>When user deletes (destroy) the current <a href="map.html">Map</a>, refresh the browser.</p>

        
          <div class='highlight'><pre>    <span class="attribute">mapRemoved</span>: <span class="function"><span class="params">(map)</span> =&gt;</span>
        SystemApp.alertEvents.trigger <span class="string">"footer"</span>, {<span class="attribute">removedModel</span>: map}
        SystemApp.toggleLoading <span class="literal">true</span>

        <span class="function"><span class="title">reloadPage</span> = -&gt;</span> window.open <span class="string">"/"</span>, <span class="string">"_self"</span>
        setTimeout reloadPage, <span class="number">1000</span></pre></div>
        
      
        
        <h2 id="binding-map-shapes">BINDING MAP SHAPES</h2>

        
      
        
        <p>Bind the current map&#39;s shapes (a <a href="shape.html">ShapeCollection</a>) to the view.</p>

        
          <div class='highlight'><pre>    <span class="attribute">bindShapes</span>:<span class="function"> =&gt;</span>
        <span class="property">@addShape</span> item <span class="keyword">for</span> item <span class="keyword">in</span> <span class="property">@model</span>.shapes().models
        <span class="property">@bindLinks</span>()
        <span class="property">@toggleGridLines</span> <span class="property">@editEnabled</span></pre></div>
        
      
        
        <p>Create a <a href="shapeView.html">shape view</a> based on the passed <a href="shape.html">shape model</a>
and add it to the map. Make sure we don&#39;t add orphan shapes by checking if there&#39;s
an ID present.</p>

        
          <div class='highlight'><pre>    <span class="attribute">addShape</span>: <span class="function"><span class="params">(shape, collection)</span> =&gt;</span>
        <span class="keyword">return</span> <span class="keyword">if</span> <span class="keyword">not</span> shape.id? <span class="keyword">or</span> shape.id <span class="keyword">is</span> <span class="string">""</span>

        view = <span class="keyword">new</span> SystemApp.MapShapeView {<span class="attribute">model</span>: shape}
        view.bindEntityObject()
        view.render <span class="keyword">this</span>

        <span class="property">@shapeViews</span>[shape.id] = view
        <span class="property">@stackGroups</span>[shape.zIndex()].push view.svgs()</pre></div>
        
      
        
        <p>If a collection was passed, it means shape was added from the
<a href="entityListView.html">Shape Entity List</a> panel, so set <code>save</code> to true,
unless map <code>silent</code> is true which means it might have been added via the API.</p>

        
          <div class='highlight'><pre>        save = collection? <span class="keyword">and</span> <span class="keyword">not</span> <span class="property">@model</span>.silent()

        <span class="property">@setShapePosition</span> view, shape.x(), shape.y(), save

        <span class="keyword">if</span> save
            view.blink()
            <span class="property">@addToSelected</span> view</pre></div>
        
      
        
        <p>Removes a shape from the map and delete its value from the <code>shapeViews</code>.</p>

        
          <div class='highlight'><pre>    <span class="attribute">removeShape</span>: <span class="function"><span class="params">(model)</span> =&gt;</span>
        view = <span class="property">@shapeViews</span>[model.id]

        <span class="property">@removeFromSelected</span> view
        <span class="property">@model</span>.save()

        <span class="keyword">delete</span> <span class="property">@shapeViews</span>[model.id]</pre></div>
        
      
        
        <p>Unbind all shapes from the map.</p>

        
          <div class='highlight'><pre>    <span class="attribute">unbindShapes</span>:<span class="function"> =&gt;</span>
        _.each <span class="property">@shapeViews</span>, <span class="function"><span class="params">(view)</span> =&gt;</span> view.dispose()
        <span class="property">@shapeViews</span> = {}</pre></div>
        
      
        
        <p>Add the specified <a href="shapeView.html">Shape View</a> or <a href="linkView.html">Link View</a> to the list of selected
elements on the map. When holding &quot;Ctrl&quot;, the <code>multiple</code> argument will be true and the shape will be
added to the selected list. Otherwise it will clear the list and add the element as the only selected.</p>

        
          <div class='highlight'><pre>    <span class="attribute">addToSelected</span>: <span class="function"><span class="params">(view, multiple)</span> =&gt;</span>
        <span class="keyword">return</span> <span class="keyword">if</span> <span class="keyword">not</span> view?.model?

        <span class="property">@clearSelectedShapes</span>()
        <span class="property">@selectedShapes</span>[view.model.id] = view

        view.highlight()

        entityObject = view.model.entityObject
        textTitle = view.model.defaultText()
        selectedCount = <span class="property">@countSelectedShapes</span>()</pre></div>
        
      
        
        <p>If multiple shapes are selected, add multiple text to the footer.
If the view&#39;s model has an <code>entityObject</code> property, means it has an
<a href="entityObject.html">Entity Object</a> bound to it so show its title on the footer.
Otherwise show the shape&#39;s title text.</p>

        
          <div class='highlight'><pre>        <span class="keyword">if</span> selectedCount &gt; <span class="number">1</span>
            <span class="property">@controlsView</span>.bind <span class="property">@selectedShapes</span>
            <span class="property">@setFooterShape</span>(selectedCount + <span class="string">" "</span> + SystemApp.Messages.elementsSelected)
        <span class="keyword">else</span>
            <span class="property">@controlsView</span>.bind view
            <span class="keyword">if</span> entityObject?
                <span class="property">@setFooterShape</span> entityObject.title()
            <span class="keyword">else</span> <span class="keyword">if</span> textTitle? <span class="keyword">and</span> textTitle <span class="keyword">isnt</span> <span class="string">""</span>
                <span class="property">@setFooterShape</span> textTitle
            <span class="keyword">else</span>
                <span class="property">@setFooterShape</span> view.model.id

        SystemApp.consoleLog <span class="string">"MapView.addToSelected"</span>, view.model.id</pre></div>
        
      
        
        <p>Remove the specified <a href="shapeView.html">Shape View</a> or <a href="linkView.html">Link View</a> from
the list of selected elements.</p>

        
          <div class='highlight'><pre>    <span class="attribute">removeFromSelected</span>: <span class="function"><span class="params">(view)</span> =&gt;</span>
        <span class="property">@selectedShapes</span>[view.model.id]?.unhighlight()
        <span class="keyword">delete</span> <span class="property">@selectedShapes</span>[view.model.id]</pre></div>
        
      
        
        <p>Unbind shape if <code>selectedShapes</code> length is less than 1.</p>

        
          <div class='highlight'><pre>        <span class="property">@controlsView</span>.bind() <span class="keyword">if</span> <span class="property">@countSelectedShapes</span>() &lt; <span class="number">1</span>

        SystemApp.consoleLog <span class="string">"MapView.removeFromSelected"</span>, view.model.id</pre></div>
        
      
        
        <p>Set the current shape at which mouse is pointing. This is mainly used when creating links between shapes.</p>

        
          <div class='highlight'><pre>    <span class="attribute">setHoverShape</span>: <span class="function"><span class="params">(shapeView)</span> =&gt;</span>
        <span class="property">@hoverShape</span> = shapeView</pre></div>
        
      
        
        <p>Set the property to be displayed inside the map shapes.</p>

        
          <div class='highlight'><pre>    <span class="attribute">setOverrideShapeTitle</span>: <span class="function"><span class="params">(prop)</span> =&gt;</span>
        SystemApp.consoleLog <span class="string">"MapView.setOverrideShapeTitle"</span>, prop</pre></div>
        
      
        
        <p>If <code>prop</code> is passed, then make sure we append the data binding key and the
entity object namespace before its value.</p>

        
          <div class='highlight'><pre>        <span class="keyword">if</span> prop? <span class="keyword">and</span> prop <span class="keyword">isnt</span> <span class="string">""</span>
            prop = <span class="string">"<span class="subst">#{SystemApp.Settings.general.dataBindingKey}</span><span class="subst">#{SystemApp.Settings.entityObject.bindingNamespace}</span>.<span class="subst">#{prop}</span>"</span>

        <span class="property">@overrideShapeTitle</span> = prop
        _.each <span class="property">@shapeViews</span>, <span class="function"><span class="params">(view)</span> =&gt;</span> view.labelsView.refreshTitle()</pre></div>
        
      
        
        <h2 id="binding-map-links">BINDING MAP LINKS</h2>

        
      
        
        <p>Bind shape links to the map.</p>

        
          <div class='highlight'><pre>    <span class="attribute">bindLinks</span>:<span class="function"> =&gt;</span>
        <span class="property">@addLink</span> item <span class="keyword">for</span> item <span class="keyword">in</span> <span class="property">@model</span>.links().models</pre></div>
        
      
        
        <p>Add a single link to the map.</p>

        
          <div class='highlight'><pre>    <span class="attribute">addLink</span>: <span class="function"><span class="params">(item, collection)</span> =&gt;</span>
        sourceView = <span class="property">@shapeViews</span>[item.sourceId()]
        targetView = <span class="property">@shapeViews</span>[item.targetId()]</pre></div>
        
      
        
        <p>Do not proceed if target or source shape is not valid.</p>

        
          <div class='highlight'><pre>        <span class="keyword">return</span> <span class="keyword">if</span> <span class="keyword">not</span> sourceView? <span class="keyword">or</span> <span class="keyword">not</span> targetView?

        view = <span class="keyword">new</span> SystemApp.MapLinkView {<span class="attribute">model</span>: item}
        <span class="property">@linkViews</span>[item.id] = view

        view.render <span class="keyword">this</span>
        view.semiHide() <span class="keyword">if</span> <span class="keyword">not</span> <span class="property">@controlsView</span>.isLinksVisible()
        <span class="property">@stackGroups</span>[item.zIndex()].push view.svgs()</pre></div>
        
      
        
        <p>If a collection was passed, it means links was just created by the user
so set <code>save</code> to true, and save the <a href="map.html">Current Map</a> in this case.</p>

        
          <div class='highlight'><pre>        save = collection?
        <span class="property">@model</span>.save() <span class="keyword">if</span> save</pre></div>
        
      
        
        <p>Remove a link from the map.</p>

        
          <div class='highlight'><pre>    <span class="attribute">removeLink</span>: <span class="function"><span class="params">(link)</span> =&gt;</span>
        <span class="keyword">delete</span> <span class="property">@linkViews</span>[link.id]
        <span class="property">@model</span>.save()</pre></div>
        
      
        
        <p>Unbind element links from map</p>

        
          <div class='highlight'><pre>    <span class="attribute">unbindLinks</span>:<span class="function"> =&gt;</span>
        _.each <span class="property">@linkViews</span>, <span class="function"><span class="params">(view)</span> =&gt;</span> view.dispose()
        <span class="property">@linkViews</span> = {}</pre></div>
        
      
        
        <p>Get all <a href="linkView.html">Link Views</a> related to the specified shape.</p>

        
          <div class='highlight'><pre>    <span class="attribute">getLinkViewsForShape</span>: <span class="function"><span class="params">(shape)</span> =&gt;</span>
        <span class="keyword">return</span> _.filter <span class="property">@linkViews</span>, <span class="function"><span class="params">(linkView)</span> =&gt;</span>
            linkView.model.sourceId() <span class="keyword">is</span> shape.id <span class="keyword">or</span> linkView.model.targetId() <span class="keyword">is</span> shape.id</pre></div>
        
      
        
        <h2 id="map-controls">MAP CONTROLS</h2>

        
      
        
        <p>User has clicked the mouse and started panning (moving) the map around.</p>

        
          <div class='highlight'><pre>    <span class="attribute">panningStart</span>: <span class="function"><span class="params">(e)</span> =&gt;</span>
        <span class="property">@$panningIcon</span>.mousemove <span class="property">@panningMove</span>
        <span class="property">@$el</span>.css <span class="string">"cursor"</span>, <span class="string">"move"</span>

        <span class="property">@mousePosX</span> = e.pageX
        <span class="property">@mousePosY</span> = e.pageY

        <span class="property">@isPanning</span> = <span class="literal">true</span></pre></div>
        
      
        
        <p>User is panning (moving) the map while holding the mouse button.
Please note that it is NOT possible to go outside the map bounds.</p>

        
          <div class='highlight'><pre>    <span class="attribute">panningMove</span>: <span class="function"><span class="params">(e)</span> =&gt;</span>
        <span class="property">@currentPanX</span> -= (e.pageX - <span class="property">@mousePosX</span>) * <span class="property">@currentZoom</span>
        <span class="property">@currentPanY</span> -= (e.pageY - <span class="property">@mousePosY</span>) * <span class="property">@currentZoom</span>
        sumWidth = <span class="property">@mapDivWidth</span> - <span class="property">@controlsView</span>.width</pre></div>
        
      
        
        <p>If there&#39;s a map bound, then check if the current pan X and Y values
are less than the maximum allowed values, which is the map&#39;s paper
width/height - the map&#39;s div <code>#map</code> width/height. This will ensure
that grid lines are always visible.</p>

        
          <div class='highlight'><pre>        <span class="keyword">if</span> <span class="property">@model</span>?
            maxPanX = <span class="property">@model</span>.paperSizeX() - sumWidth * <span class="property">@currentZoom</span>
            maxPanY = <span class="property">@model</span>.paperSizeY() - <span class="property">@mapDivHeight</span> * <span class="property">@currentZoom</span>
            <span class="property">@currentPanX</span> = maxPanX <span class="keyword">if</span> <span class="property">@currentPanX</span> &gt; maxPanX
            <span class="property">@currentPanY</span> = maxPanY <span class="keyword">if</span> <span class="property">@currentPanY</span> &gt; maxPanY</pre></div>
        
      
        
        <p>Only show the &quot;moving icon&quot; when current map position has not reached its borders.</p>

        
          <div class='highlight'><pre>        <span class="keyword">if</span> (<span class="property">@currentPanX</span> &gt; <span class="number">0</span> <span class="keyword">and</span> <span class="property">@currentPanX</span> &lt; maxPanX) <span class="keyword">or</span> (<span class="property">@currentPanY</span> &gt; <span class="number">0</span> <span class="keyword">and</span> <span class="property">@currentPanY</span> &lt; maxPanY)
            <span class="property">@$panningIcon</span>.css <span class="string">"display"</span>, <span class="string">""</span>
        <span class="keyword">else</span>
            <span class="property">@$panningIcon</span>.css <span class="string">"display"</span>, <span class="string">"none"</span></pre></div>
        
      
        
        <p>Set temporary mouse position variables.</p>

        
          <div class='highlight'><pre>        <span class="property">@mousePosX</span> = e.pageX
        <span class="property">@mousePosY</span> = e.pageY

        <span class="property">@setViewBox</span>()</pre></div>
        
      
        
        <p>User has finished panning (moving) the map when mouse button is released.</p>

        
          <div class='highlight'><pre>    <span class="attribute">panningEnd</span>: <span class="function"><span class="params">(e)</span> =&gt;</span>
        <span class="property">@$panningIcon</span>.unbind <span class="string">"mousemove"</span>
        <span class="property">@$panningIcon</span>.css <span class="string">"display"</span>, <span class="string">"none"</span>
        <span class="property">@$el</span>.css <span class="string">"cursor"</span>, <span class="string">"default"</span>

        <span class="property">@isPanning</span> = <span class="literal">false</span>

        e.stopPropagation()
        e.preventDefault()</pre></div>
        
      
        
        <p>Helper to get the paper <code>viewBox</code> object.</p>

        
          <div class='highlight'><pre>    <span class="attribute">getViewBox</span>:<span class="function"> =&gt;</span>
        <span class="keyword">return</span> <span class="property">@paper</span>.canvas.viewBox.baseVal</pre></div>
        
      
        
        <p>Set the current view box (zoom and panning) of the map.
The max and min zoom values are defined on the <a href="settings.html">Settings</a>.</p>

        
          <div class='highlight'><pre>    <span class="attribute">setViewBox</span>:<span class="function"> =&gt;</span>
        <span class="property">@currentZoom</span> = SystemApp.Settings.map.minZoom <span class="keyword">if</span> <span class="property">@currentZoom</span> &lt; SystemApp.Settings.map.minZoom
        <span class="property">@currentZoom</span> = SystemApp.Settings.map.maxZoom <span class="keyword">if</span> <span class="property">@currentZoom</span> &gt; SystemApp.Settings.map.maxZoom

        boxWidth = <span class="property">@paper</span>.width * <span class="property">@currentZoom</span>
        boxHeight = <span class="property">@paper</span>.height * <span class="property">@currentZoom</span>

        <span class="property">@currentPanX</span> = <span class="number">0</span> <span class="keyword">if</span> <span class="property">@currentPanX</span> &lt; <span class="number">0</span>
        <span class="property">@currentPanY</span> = <span class="number">0</span> <span class="keyword">if</span> <span class="property">@currentPanY</span> &lt; <span class="number">0</span>

        <span class="property">@paper</span>.setViewBox(<span class="property">@currentPanX</span>, <span class="property">@currentPanY</span>, boxWidth, boxHeight, <span class="literal">true</span>)

        SystemApp.mapEvents.trigger <span class="string">"zoom"</span>, <span class="property">@currentZoom</span></pre></div>
        
      
        
        <p>Zoom in, with optional <code>amount</code> parameter.</p>

        
          <div class='highlight'><pre>    <span class="attribute">zoomIn</span>: <span class="function"><span class="params">(amount)</span> =&gt;</span>
        amount = SystemApp.Settings.map.zoomStep <span class="keyword">if</span> <span class="keyword">not</span> amount?
        <span class="property">@zoomSet</span> <span class="property">@currentZoom</span> - amount</pre></div>
        
      
        
        <p>Zoom out, with optional <code>amount</code> parameter.</p>

        
          <div class='highlight'><pre>    <span class="attribute">zoomOut</span>: <span class="function"><span class="params">(amount)</span> =&gt;</span>
        amount = SystemApp.Settings.map.zoomStep <span class="keyword">if</span> <span class="keyword">not</span> amount?
        <span class="property">@zoomSet</span> <span class="property">@currentZoom</span> + amount</pre></div>
        
      
        
        <p>Set the <code>currentZoom</code> variable and update the view.
Save zoom to the <a href="userSettings.html">user settings</a>.</p>

        
          <div class='highlight'><pre>    <span class="attribute">zoomSet</span>: <span class="function"><span class="params">(value)</span> =&gt;</span>
        <span class="property">@currentZoom</span> = value
        <span class="property">@setViewBox</span>()

        <span class="keyword">if</span> <span class="property">@timerAfterZoom</span>?
            clearTimeout <span class="property">@timerAfterZoom</span>
        <span class="property">@timerAfterZoom</span> = setTimeout <span class="property">@afterZoomSet</span>, SystemApp.Settings.map.zoomUpdateDelay</pre></div>
        
      
        
        <p>Delayed trigger to update font sizes on labels and save zoom to
the <a href="userSettings.html">user settings</a>, to achieve better performance.</p>

        
          <div class='highlight'><pre>    <span class="attribute">afterZoomSet</span>:<span class="function"> =&gt;</span>
        SystemApp.Data.userSettings.mapZoom <span class="property">@currentZoom</span>
        SystemApp.mapEvents.trigger <span class="string">"zoom:set"</span>

        <span class="property">@timerAfterZoom</span> = <span class="literal">null</span></pre></div>
        
      
        
        <p>Toggle the <code>editEnabled</code> on or off.</p>

        
          <div class='highlight'><pre>    <span class="attribute">toggleEdit</span>: <span class="function"><span class="params">(enabled)</span> =&gt;</span>
        <span class="property">@editEnabled</span> = enabled
        <span class="property">@toggleGridLines</span> enabled</pre></div>
        
      
        
        <p>Toggle the map background image (represented by the <code>paperBg</code> element, if there&#39;s one).</p>

        
          <div class='highlight'><pre>    <span class="attribute">toggleBackground</span>: <span class="function"><span class="params">(enabled)</span> =&gt;</span>
        <span class="keyword">if</span> enabled
            <span class="property">@paperBg</span>.show()
        <span class="keyword">else</span>
            <span class="property">@paperBg</span>.hide()</pre></div>
        
      
        
        <p>Toggle links on or off (<a href="linkView.html">Link View</a> <code>show</code> and <code>semiHide</code> methods).
Please note that hiding links means setting their opacity to a very low value,
so they&#39;re almost invisible but not totally hidden.</p>

        
          <div class='highlight'><pre>    <span class="attribute">toggleLinks</span>: <span class="function"><span class="params">(enabled)</span> =&gt;</span>
        <span class="property">@isLinksVisible</span> = enabled

        _.each <span class="property">@linkViews</span>, <span class="function"><span class="params">(linkView)</span> -&gt;</span>
            <span class="keyword">if</span> <span class="keyword">not</span> linkView?
                <span class="keyword">return</span>
            <span class="keyword">if</span> enabled
                linkView.show()
            <span class="keyword">else</span>
                linkView.semiHide()</pre></div>
        
      
        
        <p>Toggle grid lines on or off. Usually grid lines will be toggled on when map is in
edit mode, and off when not editable.</p>

        
          <div class='highlight'><pre>    <span class="attribute">toggleGridLines</span>: <span class="function"><span class="params">(enabled)</span> =&gt;</span>
        <span class="keyword">if</span> <span class="keyword">not</span> <span class="property">@model</span>?
            <span class="keyword">return</span>

        sizeX = <span class="property">@model</span>.gridSizeX()
        sizeY = <span class="property">@model</span>.gridSizeY()

        lengthX = <span class="property">@paper</span>.width / sizeX
        lengthY = <span class="property">@paper</span>.height / sizeY

        <span class="property">@gridLines</span>?.remove()
        pathString = <span class="string">""</span>

        <span class="keyword">if</span> enabled
            i = <span class="number">0</span>
            <span class="keyword">while</span> i++ &lt; lengthX
                pathString += <span class="string">"M"</span> + i * sizeX + <span class="string">" 0V"</span> + <span class="property">@paper</span>.height

            i = <span class="number">0</span>
            <span class="keyword">while</span> i++ &lt; lengthY
                pathString += <span class="string">"M0 "</span> + i * sizeY + <span class="string">"H"</span> + <span class="property">@paper</span>.width

        <span class="property">@gridLines</span> = <span class="property">@paper</span>.path(pathString).attr(<span class="string">"stroke"</span>, SystemApp.Settings.map.gridStroke)
        <span class="property">@gridLines</span>.toBack()

        <span class="property">@paperBg</span>.toBack()</pre></div>
        
      
        
        <p>Send the map background and grid lines to back of the paper.</p>

        
          <div class='highlight'><pre>    <span class="attribute">toBack</span>:<span class="function"> =&gt;</span>
        <span class="property">@gridLines</span>.toBack()
        <span class="property">@paperBg</span>.toBack()</pre></div>
        
      
        
        <p>Set position of a shape view based on grid X and Y. The absolute size of the grid blocks
are defined on the <a href="settings.html">Settings</a>.</p>

        
          <div class='highlight'><pre>    <span class="attribute">setShapePosition</span>: <span class="function"><span class="params">(view, x, y, save)</span> =&gt;</span>
        save = <span class="literal">true</span> <span class="keyword">if</span> <span class="keyword">not</span> save?
        view.setPosition x * <span class="property">@model</span>.gridSizeX(), y * <span class="property">@model</span>.gridSizeY(), save</pre></div>
        
      
        
        <p>Regroup the specified <a href="shapeView.html">Shape View</a> or <a href="linkView.html">Link View</a> to the
value set in its model&#39;s <code>zIndex</code> property.</p>

        
          <div class='highlight'><pre>    <span class="attribute">regroupElement</span>: <span class="function"><span class="params">(view)</span> =&gt;</span>
        svgs = view.svgs()

        <span class="keyword">for</span> svg <span class="keyword">in</span> svgs
            <span class="keyword">try</span>
                svg.node.parentNode.removeChild svg.node <span class="keyword">if</span> svg?
            <span class="keyword">catch</span> ex
                SystemApp.consoleLog <span class="string">"MapView.regroupElement"</span>, <span class="string">"Can't remove element from SVG group."</span>, svg

        <span class="property">@stackGroups</span>[view.model.zIndex()].push svgs</pre></div>
        
      
        
        <p>Get a [Shape}(shape.html) object with the first x/y free position on the map grid.
This method is called to position the shapes when they&#39;re added from
the <a href="entityListView.html">Entity List View</a> overlay.</p>

        
          <div class='highlight'><pre>    <span class="attribute">getFirstAvailableShape</span>:<span class="function"> =&gt;</span>
        x = <span class="number">0</span>
        y = <span class="number">0</span>

        _.each <span class="property">@shapeViews</span>, <span class="function"><span class="params">(view)</span> =&gt;</span>
            posX = view.x()
            posY = view.y()

            <span class="keyword">if</span> posX - x &lt; SystemApp.Settings.map.gridSizeX
                x += SystemApp.Settings.map.gridSizeX

            <span class="keyword">if</span> posY - y &lt; SystemApp.Settings.map.gridSizeY
                y += SystemApp.Settings.map.gridSizeY

        <span class="keyword">return</span> <span class="keyword">new</span> SystemApp.Shape {<span class="attribute">x</span>: x / SystemApp.Settings.map.gridSizeX, <span class="attribute">y</span>: y / SystemApp.Settings.map.gridSizeY}</pre></div>
        
      
        
        <p>Blink the selected <a href="shapeView.html">Shape</a> on the map.</p>

        
          <div class='highlight'><pre>    <span class="attribute">blinkSelectedShapes</span>:<span class="function"> =&gt;</span>
        view.blink() <span class="keyword">for</span> modelId, view <span class="keyword">of</span> <span class="property">@selectedShapes</span></pre></div>
        
      
        
        <h2 id="keyboard-events">KEYBOARD EVENTS</h2>

        
      
        
        <p>When user presses a key. Pressing &quot;Ctrl+S&quot; will save the current map,
and pressing &quot;Esc&quot; twice will unselect the any selected shapes.</p>

        
          <div class='highlight'><pre>    <span class="attribute">keyDown</span>: <span class="function"><span class="params">(e)</span> =&gt;</span>
        keyCode = e.keyCode</pre></div>
        
      
        
        <p>User pressed &quot;Ctrl+S&quot;, so save everything.</p>

        
          <div class='highlight'><pre>        <span class="keyword">if</span> e.ctrlKey <span class="keyword">and</span> keyCode <span class="keyword">is</span> <span class="number">83</span>
            <span class="property">@model</span>.save()
            e.preventDefault()
            e.stopPropagation()</pre></div>
        
      
        
        <p>User pressed &quot;Ctrl+E&quot;, so toggle the edit mode.</p>

        
          <div class='highlight'><pre>        <span class="keyword">else</span> <span class="keyword">if</span> e.ctrlKey <span class="keyword">and</span> keyCode <span class="keyword">is</span> <span class="number">69</span>
            SystemApp.mapEvents.trigger <span class="string">"edit:toggle"</span>, <span class="keyword">not</span> <span class="property">@editEnabled</span>
            e.preventDefault()
            e.stopPropagation()</pre></div>
        
      
        
        <p>User pressed &quot;Esc&quot; twice in a row, so deselect the current shape.</p>

        
          <div class='highlight'><pre>        <span class="keyword">else</span> <span class="keyword">if</span> keyCode <span class="keyword">is</span> <span class="number">27</span> <span class="keyword">and</span> <span class="property">@lastPressedKey</span> <span class="keyword">is</span> <span class="number">27</span>
            <span class="property">@clearSelectedShapes</span>()
            <span class="property">@lastPressedKey</span> = <span class="literal">null</span></pre></div>
        
      
        
        <p>User pressed &quot;F11&quot;, go to fullscreen mode.</p>

        
          <div class='highlight'><pre>        <span class="keyword">else</span> <span class="keyword">if</span> e.ctrlKey <span class="keyword">and</span> keyCode <span class="keyword">is</span> <span class="number">84</span>
            <span class="property">@toggleFullscreen</span>()
            e.preventDefault()
            e.stopPropagation()</pre></div>
        
      
        
        <p>Set the last pressed key code.</p>

        
          <div class='highlight'><pre>        <span class="property">@lastPressedKey</span> = keyCode</pre></div>
        
      
        
        <h2 id="mouse-events">MOUSE EVENTS</h2>

        
      
        
        <p>Triggered when user clicks the map. If clicking with left button, prepares map to pan.</p>

        
          <div class='highlight'><pre>    <span class="attribute">mouseDown</span>: <span class="function"><span class="params">(e)</span> =&gt;</span>
        src = e.target
        targetId = src.id</pre></div>
        
      
        
        <p>Temp variables to check where the user clicked.</p>

        
          <div class='highlight'><pre>        isBaseSvgTag = src.tagName <span class="keyword">isnt</span> <span class="string">"svg"</span>
        isMapTag = targetId <span class="keyword">isnt</span> SystemApp.Settings.map.id
        isGridLine = targetId.indexOf(SystemApp.Settings.map.gridIdPrefix) &lt; <span class="number">0</span></pre></div>
        
      
        
        <p>If click wasn&#39;t on the map background or any of the grid lines, do not proceed with panning.</p>

        
          <div class='highlight'><pre>        <span class="keyword">if</span> e.which &gt; <span class="number">1</span> <span class="keyword">or</span> (<span class="property">@editEnabled</span> <span class="keyword">and</span> isBaseSvgTag <span class="keyword">and</span> isMapTag <span class="keyword">and</span> isGridLine)
            <span class="keyword">return</span></pre></div>
        
      
        
        <p>If user clicked on a blank area, deselect the current <a href="shapeView.html">Shape View</a>.</p>

        
          <div class='highlight'><pre>        <span class="keyword">if</span> targetId <span class="keyword">is</span> SystemApp.Settings.map.id
            <span class="property">@shapesMoverView</span>.hide()
            <span class="property">@clearSelectedShapes</span>()</pre></div>
        
      
        
        <p>If pressing Shift, then start selecting multiple elements with the <a href="shapesMoverView.html">Shapes Mover View</a>.</p>

        
          <div class='highlight'><pre>        <span class="keyword">if</span> <span class="property">@editEnabled</span> <span class="keyword">and</span> <span class="property">@isEventMultiple</span> e
            <span class="property">@shapesMoverView</span>.show e.pageX, e.pageY
        <span class="keyword">else</span>
            <span class="property">@panningStart</span> e</pre></div>
        
      
        
        <p>Triggered when user moves the mouse around the map. If <code>isPanning</code> is true
then pan the map with the amount of pixels from the mouse down location.</p>

        
          <div class='highlight'><pre>    <span class="attribute">mouseMove</span>: <span class="function"><span class="params">(e)</span> =&gt;</span>
        <span class="keyword">if</span> <span class="property">@isPanning</span>
            <span class="property">@panningMove</span> e</pre></div>
        
      
        
        <p>Triggered when user releases mouse button on the map. Set <code>isPanning</code> to false
and restore the default mouse cursor.</p>

        
          <div class='highlight'><pre>    <span class="attribute">mouseUp</span>: <span class="function"><span class="params">(e)</span> =&gt;</span>
        <span class="keyword">if</span> <span class="property">@isPanning</span>
            <span class="property">@panningEnd</span> e</pre></div>
        
      
        
        <p>Triggered when user scrolls the mouse wheel. Scrolling will change the map zoom.</p>

        
          <div class='highlight'><pre>    <span class="attribute">mouseWheel</span>: <span class="function"><span class="params">(e)</span> =&gt;</span>
        <span class="keyword">if</span> <span class="property">@isPanning</span>
            <span class="keyword">return</span>

        delta = e.originalEvent.wheelDeltaY

        <span class="keyword">if</span> delta &gt; <span class="number">0</span>
            SystemApp.mapEvents.trigger <span class="string">"zoom:in"</span>
        <span class="keyword">else</span>
            SystemApp.mapEvents.trigger <span class="string">"zoom:out"</span>

        e.stopPropagation()
        e.preventDefault()</pre></div>
        
      
        
        <p>Triggered when user right click the map. This will cancel the default context menu.</p>

        
          <div class='highlight'><pre>    <span class="attribute">contextMenu</span>:<span class="function"> =&gt;</span>
        <span class="keyword">return</span> <span class="literal">false</span></pre></div>
        
      
        
        <p>Triggered when user double clicks the map. This will reset the map position to top left corner.</p>

        
          <div class='highlight'><pre>    <span class="attribute">doubleClick</span>: <span class="function"><span class="params">(e)</span> =&gt;</span>
        src = e.target

        <span class="keyword">if</span> src?.tagname <span class="keyword">isnt</span> <span class="string">"rect"</span> <span class="keyword">and</span> src?.tagname <span class="keyword">isnt</span> <span class="string">"path"</span>
            <span class="keyword">return</span>

        <span class="property">@currentPanX</span> = <span class="number">0</span>
        <span class="property">@currentPanY</span> = <span class="number">0</span>

        <span class="property">@zoomSet</span> <span class="number">1</span>

        <span class="property">@isPanning</span> = <span class="literal">false</span>
        e.stopPropagation()
        e.preventDefault()</pre></div>
        
      
        
        <h2 id="map-property-changes">MAP PROPERTY CHANGES</h2>

        
      
        
        <p>Triggered when the current <a href="map.html">Map</a> <code>name</code> has changed.</p>

        
          <div class='highlight'><pre>    <span class="attribute">nameChanged</span>:<span class="function"> =&gt;</span>
        <span class="property">@model</span>.save()

        <span class="property">@setFooterName</span> <span class="property">@model</span>.name()</pre></div>
        
      
        
        <p>Triggered when the current <a href="map.html">Map</a> <code>paperSizeX</code> or <code>paperSizeY</code> has changed.</p>

        
          <div class='highlight'><pre>    <span class="attribute">paperSizeChanged</span>:<span class="function"> =&gt;</span>
        <span class="property">@model</span>.save()

        <span class="property">@paper</span>.setSize <span class="property">@model</span>.paperSizeX(), <span class="property">@model</span>.paperSizeY()

        <span class="property">@toggleGridLines</span> <span class="literal">true</span>
        <span class="property">@setViewBox</span>()</pre></div>
        
      
        
        <p>Triggered when the current <a href="map.html">Map</a> <code>gridSizeX</code> or <code>gridSizeY</code> has changed.</p>

        
          <div class='highlight'><pre>    <span class="attribute">gridSizeChanged</span>:<span class="function"> =&gt;</span>
        <span class="property">@model</span>.save()

        <span class="property">@toggleGridLines</span> <span class="literal">true</span>
        <span class="property">@clearSelectedShapes</span>()

        _.each <span class="property">@shapeViews</span>, <span class="function"><span class="params">(shapeView)</span> =&gt;</span> shapeView.resetDimensions()
        _.each <span class="property">@linkViews</span>, <span class="function"><span class="params">(linkView)</span> =&gt;</span> linkView.drag()

        <span class="property">@setViewBox</span>()</pre></div>
        
      
        
        <h2 id="audit-data-and-alerts">AUDIT DATA AND ALERTS</h2>

        
      
        
        <p>When user deletes (destroy) an <a href="auditData.html">AuditData</a>, reload
the whole page.</p>

        
          <div class='highlight'><pre>    <span class="attribute">auditDataRemoved</span>: <span class="function"><span class="params">(auditData)</span> =&gt;</span>
        SystemApp.alertEvents.trigger <span class="string">"footer"</span>, {<span class="attribute">removedModel</span>: auditData}
        _.delay location.reload, SystemApp.Settings.general.refetchDelay</pre></div>
        
      
        
        <p>When an <a href="auditData.html">AuditData</a> has been refreshed, run it against
all registered <a href="auditEvent.html">Audit Events</a>.</p>

        
          <div class='highlight'><pre>    <span class="attribute">auditDataRefresh</span>: <span class="function"><span class="params">(auditData)</span> =&gt;</span>
        _.each SystemApp.Data.auditEvents.models, <span class="function"><span class="params">(alert)</span> -&gt;</span> alert.run()</pre></div>
        
      
        
        <p>Trigger a &quot;footer message&quot; action.</p>

        
          <div class='highlight'><pre>    <span class="attribute">auditEventFooterMessage</span>: <span class="function"><span class="params">(alertObj, action, matchedRules)</span> =&gt;</span>
        SystemApp.alertEvents.trigger <span class="string">"footer"</span>, {<span class="attribute">title</span>: <span class="string">"ALERT!!!"</span>, <span class="attribute">message</span>: action.actionValue(), <span class="attribute">isError</span>: <span class="literal">true</span>}</pre></div>
        
      
        
        <h2 id="url-and-footer-properties">URL AND FOOTER PROPERTIES</h2>

        
      
        
        <p>Reset the URL to the current&#39;s map URL. This is triggered mainly when user closes
an open overlay, so we can properly keep track of page history.
This will NOT trigger the backbone route event - it only updates the URL.</p>

        
          <div class='highlight'><pre>    <span class="attribute">resetUrl</span>:<span class="function"> =&gt;</span>
        <span class="keyword">if</span> <span class="property">@model</span>?
            SystemApp.routes.navigate <span class="string">"map/"</span> + <span class="property">@model</span>.urlKey(), {<span class="attribute">trigger</span>: <span class="literal">false</span>}
            SystemApp.consoleLog <span class="string">"MapView.resetUrl"</span>, <span class="string">"Current map's URL: "</span> + <span class="property">@model</span>.urlKey()
        <span class="keyword">else</span>
            SystemApp.routes.navigate <span class="string">""</span>, {<span class="attribute">trigger</span>: <span class="literal">false</span>}</pre></div>
        
      
        
        <p>Bind the map name to the footer.</p>

        
          <div class='highlight'><pre>    <span class="attribute">setFooterName</span>: <span class="function"><span class="params">(value)</span> =&gt;</span>
        <span class="property">@$footerName</span>.html value
        <span class="property">@$footerShape</span>.empty()</pre></div>
        
      
        
        <p>Show the current selected shape name on the footer.</p>

        
          <div class='highlight'><pre>    <span class="attribute">setFooterShape</span>: <span class="function"><span class="params">(shape)</span> =&gt;</span>
        shape = SystemApp.Messages.noShapeSelected <span class="keyword">if</span> shape <span class="keyword">is</span> <span class="literal">undefined</span> <span class="keyword">or</span> shape <span class="keyword">is</span> <span class="literal">null</span> <span class="keyword">or</span> shape <span class="keyword">is</span> <span class="string">""</span>
        <span class="property">@$footerShape</span>.html shape</pre></div>
        
      
        
        <h2 id="thumbnails">THUMBNAILS</h2>

        
      
        
        <p>Post the SVG representation of the map to the server to generate the SVG and PNG thumbnails.
This WON&#39;T happen for local maps.</p>

        
          <div class='highlight'><pre>    <span class="attribute">generateThumbnail</span>:<span class="function"> =&gt;</span>
        <span class="keyword">return</span> <span class="keyword">if</span> <span class="property">@model</span>.isLocal()

        now = <span class="keyword">new</span> Date()
        thumbnailDate = <span class="property">@model</span>.thumbnailDate()

        <span class="keyword">if</span> thumbnailDate?
            thumbnailDate = <span class="keyword">new</span> Date thumbnailDate
        <span class="keyword">else</span>
            thumbnailDate = <span class="keyword">new</span> Date()</pre></div>
        
      
        
        <p>If a thumbnail was generated less than 5 minutes ago, do nothing.</p>

        
          <div class='highlight'><pre>        <span class="keyword">if</span> now.getTime() - thumbnailDate.getTime() &lt; SystemApp.Settings.map.thumbnailExpires
            <span class="keyword">return</span></pre></div>
        
      
        
        <p>Update thumbnail date and generate new thumbnail using an AJAX post.</p>

        
          <div class='highlight'><pre>        <span class="property">@model</span>.thumbnailDate now</pre></div>
        
      
        
        <p>Clean SVG before sending to server.</p>

        
          <div class='highlight'><pre>        svgData = <span class="property">@$el</span>.html()
        svgData = svgData.replace <span class="regexp">/&lt;(image)[^&gt;]*&gt;[^&lt;]*(&lt;\/image&gt;)/ig</span>, <span class="string">""</span>

        $.ajax
            <span class="attribute">url</span>: SystemApp.Settings.map.thumbnailBaseUrl + <span class="property">@model</span>.id
            <span class="attribute">cache</span>: <span class="literal">false</span>
            <span class="attribute">dataType</span>: <span class="string">"json"</span>
            <span class="attribute">type</span>: <span class="string">"POST"</span>
            <span class="attribute">data</span>:
                <span class="attribute">svg</span>: svgData</pre></div>
        
      
      <div class="fleur">h</div>
    </div>
  </div>
</body>
</html>
